<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./tongxunlu.css" />
  </head>
  <body>
    <div class="list-container">
      <!-- 列表 start-->
      <div class="list-warp-item scrollbar">
        <div class="list-items">
          <ul class="list-items-wrap">
            <!-- start -->
            <li>
              <h2 class="active">A</h2>
              <ul class="list-item">
                <li>A1</li>
                <li>A1</li>
                <li>A1</li>
                <li>A1</li>
              </ul>
            </li>
            <!-- start -->
            <li>
              <h2>B</h2>
              <ul class="list-item">
                <li>B1</li>
                <li>B1</li>
                <li>B1</li>
                <li>B1</li>
              </ul>
            </li>
            <!-- start -->
            <li>
              <h2>C</h2>
              <ul class="list-item">
                <li>C1</li>
                <li>C1</li>
                <li>C1</li>
                <li>C1</li>
              </ul>
            </li>
            <!-- start -->
            <li>
              <h2>D</h2>
              <ul class="list-item">
                <li>D1</li>
                <li>D1</li>
                <li>D1</li>
                <li>D1</li>
              </ul>
            </li>
            <!-- start -->
            <li>
              <h2>E</h2>
              <ul class="list-item">
                <li>E1</li>
                <li>E1</li>
                <li>E1</li>
                <li>E1</li>
              </ul>
            </li>
            <!-- start -->
            <li>
              <h2>F</h2>
              <ul class="list-item">
                <li>F1</li>
                <li>F1</li>
                <li>F1</li>
                <li>F1</li>
              </ul>
            </li>
            <!-- start -->
            <li>
              <h2>G</h2>
              <ul class="list-item">
                <li>G1</li>
                <li>G1</li>
                <li>G1</li>
                <li>G1</li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
      <!-- 列表 end-->
      <!-- 索引 start -->
      <div class="list-warp-index">
        <div class="list-index">
          <h2 class="active">A</h2>
          <h2>B</h2>
          <h2>C</h2>
          <h2>D</h2>
          <h2>E</h2>
          <h2>F</h2>
          <h2>G</h2>
        </div>
      </div>
      <!-- 索引 end -->
    </div>

    <script src="./tongxunlu.js"></script>
  </body>
</html>
